<template>
    <zh-card :width="640">
        <template v-slot:title>
            <view style="border-left: 10rpx solid #2f54eb">
                <zh-text :fontSize="36" class="text-weight-b pl-10" :label="form.operationName"></zh-text>
            </view>
        </template>
        <template v-slot:status>
            <tm-icon :fontSize="42" :name="data.hiddenFlag ? 'tmicon-eye-slash' : 'tmicon-eye'" style="margin: 0 20rpx" @tap="changeSensitive"></tm-icon>
        </template>
        <template v-slot:content>
            <zh-desc prefixLabel="学生姓名:" inputAlign="left"  :prefixWidth="200"  v-model="form.fullName" ></zh-desc>
            <zh-desc prefixLabel="证件号码:" inputAlign="left"  :prefixWidth="200"  v-model="form.idcard" ></zh-desc>
            <zh-desc prefixLabel="申请时间:" inputAlign="left"  :prefixWidth="200"  v-model="form.createTime" ></zh-desc>
            <zh-desc prefixLabel="申请备注:" v-if="form.remarks" inputAlign="left"  :prefixWidth="200"  v-model="form.remarks" ></zh-desc>
            <view class="flex-row-center-start pl-10">
                <view style="width:150rpx">
                <zh-text color="black" label="审核状态:" ></zh-text>
                </view>
                <zh-tag :followTheme="false" :shadow="0" :color="(form.authStatus === '2'||form.authStatus === '3' )? 'red' :(form.authStatus === '1'?'green': 'orange')" text size="n" :label="form.authStatusName"></zh-tag>
            </view>
            <zh-desc prefixLabel="审核意见:" v-if="form.authStatus !== '0'&&form.authRemarks"  inputAlign="left"  :prefixWidth="200"  v-model="form.authRemarks" ></zh-desc>
            <zh-desc prefixLabel="审核时间:" v-if="form.authStatus !== '0'" inputAlign="left"  :prefixWidth="200"  v-model="form.authTime" ></zh-desc>
        </template>
    </zh-card>
</template>
<script lang="ts" setup>
// ------------------接收传入参数(组件)-------------------
const props = defineProps({
  modelValue: {
    type: Object,
    default: () => {
      return {};
    },
  },
});
//--------------------------参数定义-------------------------------
const data = reactive({
    hiddenFlag:true,
})
let form = ref<any>(Object.assign({},props.modelValue))
let oldForm = ref<any>(Object.assign({},props.modelValue))
//---------------------------------------内部方法----------------------------------
const changeSensitive = () => {
  data.hiddenFlag = !data.hiddenFlag;
  enInfo();
};
const enInfo = () => {
  if (data.hiddenFlag) {
    form.value.fullName = getEnName(form.value.fullName);
    form.value.idcard = getEnIdcard(form.value.idcard);
  } else {
    form.value.fullName = oldForm.value.fullName;
    form.value.idcard = oldForm.value.idcard;

  }
};
//姓名加密
const getEnName = (fullName: any) => {
  if (!fullName) {
    return '';
  }
  return '*' + fullName.substring(1, fullName.length);
};
//身份证加密
const getEnIdcard = (idCard: any) => {
  if (!idCard) {
    return '';
  }
  let enCard = '';
  if (idCard.length === 18) {
    enCard = idCard.replace(/(\w{1})\w*(\w{1})/, '$1****************$2');
  } else {
    let len = idCard.length / 3;
    let baseLen = idCard.length - len * 2;
    enCard = idCard.substring(0, len);

    for (var i = 0; i < baseLen; i++) {
      enCard = enCard + '*';
    }
    enCard = enCard + idCard.substring(len * 2, idCard.length);
  }
  return enCard;
};
// 初始化
onMounted(() => {
  enInfo();
});
watch(
  () => props.modelValue,
  () => {
    form.value = Object.assign({}, props.modelValue);
    oldForm.value = Object.assign({}, props.modelValue);
    enInfo();
  },
  { deep: true }
);
</script>